<template>
    <div class="mywelfare">
        <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
        <div class="top-bar space-around">
            <span :class="{current:cur==1}" @click="select(1)">票务</span>
            <span :class="{current:cur==2}" @click="select(2)">商城</span>
        </div>
        <div class="ticket-list" v-if="cur==1">
            <div class="list-item bg-f" v-for="(item,index) in ticketlist" :key="index">
                <div class="top flex">
                    <div class="left">
                        <p class="color-r fs-32">立减</p>
                        <p class="color-r num">{{item.discount}}</p>
                    </div>
                    <div class="right padding-24">
                        <p class="fs-32 overFlow">{{item.name}}</p>
                        <div class="space-between">
                            <p class="fs-26 color-9">{{item.time}}</p>
                            <div class="center color-r">去使用</div>
                        </div>
                    </div>
                </div>
                <div class="foot padding-24 color-6">
                    <p>使用门槛：{{item.mk}}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            isBack:true,
            title:'我的福利券',
            cur:1,
            ticketlist:[
                {
                    discount:'10%',
                    name:'优惠券名称',
                    time:'2019.02.23-2019.03.12',
                    mk:'1.门槛门槛门槛门槛门槛；2.门槛门槛门槛门槛门槛'
                },
                {
                    discount:'10%',
                    name:'优惠券名称',
                    time:'2019.02.23-2019.03.12',
                    mk:'1.门槛门槛门槛门槛门槛；2.门槛门槛门槛门槛门槛'
                },
                {
                    discount:'10%',
                    name:'优惠券名称',
                    time:'2019.02.23-2019.03.12',
                    mk:'1.门槛门槛门槛门槛门槛；2.门槛门槛门槛门槛门槛'
                }
            ]
        }
    },
    methods:{
        select(i){
            this.cur=i
        }
    }
}
</script>
<style lang="scss" scoped>
.mywelfare{
    .top-bar{
        top: 1rem;
    }
    .ticket-list{
        //padding-top: 0.001rem;
        margin-top: 2.2rem;
        .list-item{
           // padding-top: 0.001rem;
            width: 100%;
            height: auto;
            margin-bottom: 0.2rem;
            .top{
                width: 100%;
                height: 1.55rem;
                border-bottom: 0.01rem solid #e9e9e9;
                .left{
                    padding-top: 0.001rem;
                    width: 2rem;
                    height: 100%;
                    text-align: center;
                    border-right: 0.01rem solid #e9e9e9;
                    .fs-32{
                        margin-top: 0.3rem;
                    }
                    .num{
                        font-size: 0.48rem
                    }
                }
                .right{
                    height: 100%;
                    width: calc(100% - 2rem);
                    .overFlow{
                        margin-top: 0.2rem
                    }
                    .space-between{
                        margin-top: 0.1rem;
                        .center{
                            width: 1.3rem;
                            height: 0.5rem;
                            border-radius: 0.25rem;
                            border:0.01rem solid #F44349;
                        }
                    }
                    //background-color: greenyellow
                }
            }
            .foot{
                width: 100%;
                height: auto;
                padding: 0.2rem 0.24rem;
            }
        }
    }
}
</style>